<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 切换不同显示布局</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
        /* 隐藏未编译的变量 */
        
        [v-cloak] {
            display: none;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font: 15px/1.3 'Open Sans', sans-serif;
            color: #5e5b64;
            text-align: center;
        }
        
        a,
        a:visited {
            outline: none;
            color: #389dc1;
        }
        
        a:hover {
            text-decoration: none;
        }
        
        section,
        footer,
        header,
        aside,
        nav {
            display: block;
        }
        /*-------------------------
    	搜索框
    --------------------------*/
        
        .bar {
            background-color: #5c9bb7;
            background-image: -webkit-linear-gradient(top, #5c9bb7, #5392ad);
            background-image: -moz-linear-gradient(top, #5c9bb7, #5392ad);
            background-image: linear-gradient(top, #5c9bb7, #5392ad);
            box-shadow: 0 1px 1px #ccc;
            border-radius: 2px;
            width: 580px;
            padding: 10px;
            margin: 45px auto 25px;
            position: relative;
            text-align: right;
            line-height: 1;
        }
        
        .bar a {
            background: #4987a1 center center no-repeat;
            width: 32px;
            height: 32px;
            display: inline-block;
            text-decoration: none !important;
            margin-right: 5px;
            border-radius: 2px;
            cursor: pointer;
        }
        
        .bar a.active {
            background-color: #c14694;
        }
        
        .bar a.list-icon {
            background-image: url();
        }
        
        .bar a.grid-icon {
            background-image: url();
        }
        
        .bar input {
            background: #fff no-repeat 13px 13px;
            border: none;
            width: 100%;
            line-height: 19px;
            padding: 11px 0;
            border-radius: 2px;
            box-shadow: 0 2px 8px #c4c4c4 inset;
            text-align: left;
            font-size: 14px;
            font-family: inherit;
            color: #738289;
            font-weight: bold;
            outline: none;
            text-indent: 40px;
        }
        /*-------------------------
    	列表布局
    --------------------------*/
        
        ul.list {
            list-style: none;
            width: 500px;
            margin: 0 auto;
            text-align: left;
        }
        
        ul.list li {
            border-bottom: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;
        }
        
        ul.list li img {
            width: 120px;
            height: 120px;
            float: left;
            border: none;
        }
        
        ul.list li p {
            margin-left: 135px;
            font-weight: bold;
            color: #6e7a7f;
        }
        /*-------------------------
    	网格布局
    --------------------------*/
        
        ul.grid {
            list-style: none;
            width: 570px;
            margin: 0 auto;
            text-align: left;
        }
        
        ul.grid li {
            padding: 2px;
            float: left;
        }
        
        ul.grid li img {
            width: 280px;
            height: 280px;
            object-fit: cover;
            display: block;
            border: none;
        }
    </style>

</head>

<body>

    <form id="main" v-cloak>

        <div class="bar">

            <!-- 两个按钮用于切换不同的列表布局 -->

            <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
            <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
        </div>

        <!-- 我们设置了两套布局页面。使用哪套依赖于 "layout" 绑定 -->

        <ul v-if="layout == 'grid'" class="grid">
            <!-- 使用大图，没有文本 -->
            <li v-for="a in articles">
                <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.large" /></a>
            </li>
        </ul>

        <ul v-if="layout == 'list'" class="list">
            <!-- 使用小图及标题 -->
            <li v-for="a in articles">
                <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
                <p>{{a.title}}</p>
            </li>
        </ul>

    </form>
    <script>
        var demo = new Vue({
            el: '#main',
            data: {
                // 视图模型，可能的值是 "grid" 或 "list"。
                layout: 'grid',

                articles: [{
                    "title": "HTML 教程",
                    "url": "https://www.runoob.com/html/html-tutorial.html",
                    "image": {
                        "large": "https://static.runoob.com/images/mix/htmlbig.png",
                        "small": "https://static.runoob.com/images/icon/html.png"
                    }
                }, {
                    "title": "CSS 教程",
                    "url": "https://www.runoob.com/css/css-tutorial.html",
                    "image": {
                        "large": "https://static.runoob.com/images/mix/cssbig.png",
                        "small": "https://static.runoob.com/images/icon/css.png"
                    }
                }, {
                    "title": "JS 教程",
                    "url": "https://www.runoob.com/js/js-tutorial.html",
                    "image": {
                        "large": "https://static.runoob.com/images/mix/jsbig.jpeg",
                        "small": "https://static.runoob.com/images/icon/js.png"
                    }
                }, {
                    "title": "SQL  教程",
                    "url": "https://www.runoob.com/sql/sql-tutorial.html",
                    "image": {
                        "large": "https://static.runoob.com/images/mix/sqlbig.png",
                        "small": "https://static.runoob.com/images/icon/sql.png"
                    }
                }, {
                    "title": "Ajax 教程",
                    "url": "https://www.runoob.com/ajax/ajax-tutorial.html",
                    "image": {
                        "large": "https://static.runoob.com/images/mix/ajaxbig.png",
                        "small": "https://static.runoob.com/images/icon/ajax.png"
                    }
                }, {
                    "title": "Python 教程",
                    "url": "https://www.runoob.com/python/python-tutorial.html",
                    "image": {
                        "large": "https://static.runoob.com/images/mix/pythonbig.png",
                        "small": "https://static.runoob.com/images/icon/python.png"
                    }
                }]

            }
        });
    </script>
</body>

</html>